<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Input 输入框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.demo-input-label {
	display: inline-block;
	width: 130px;
}
.demo-input-suffix {
	margin-bottom: 16px;
}
.input-with-select .el-input-group__prepend {
	background-color: #fff;
}
.demo-input-size > .el-input{
	margin-bottom: 16px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<el-input v-model="input" placeholder="Please input" @change="inputChange"></el-input>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">通过 disabled 属性指定是否禁用 input 组件</p>
	<el-input v-model="input" placeholder="Please input" disabled></el-input>
	
	<el-divider content-position="left">一键清空</el-divider><!-- =============================================================== -->
	<p class="desc">使用clearable属性即可得到一个可一键清空的输入框</p>
	<el-input v-model="input" placeholder="Please input" clearable @clear="clearInput"></el-input>
	
	<el-divider content-position="left">格式化</el-divider><!-- =============================================================== -->
	<p class="desc">在 formatter的情况下显示值，我们通常同时使用 parser</p>
	<el-input v-model="input0" placeholder="Please input"
		:formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"/></el-input>
	
	<el-divider content-position="left">密码框</el-divider><!-- =============================================================== -->
	<p class="desc">使用 show-password 属性即可得到一个可切换显示隐藏的密码框</p>
	<el-input v-model="input" placeholder="Please input password" show-password type="password"></el-input>
	
	<el-divider content-position="left">带 icon 的输入框</el-divider><!-- =============================================================== -->
	<p class="desc">带有图标标记输入类型</p>
	<p class="desc">要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作</p>
	<!-- <div class="demo-input-suffix w200">
		<span class="demo-input-label">Using attributes</span>
		<el-row :gutter="20">
			<el-input v-model="input1" placeholder="Pick a date" :suffix-icon="Calendar"></el-input>
		</el-row>
		<el-row :gutter="20">
			<el-input v-model="input2" placeholder="Type something" :prefix-icon="Search"></el-input>
		</el-row>
	</div> -->
	<div class="demo-input-suffix w200">
		<span class="demo-input-label">Using slots</span>
		<el-row :gutter="20">
			<el-input v-model="input3" placeholder="Pick a date">
				<template #suffix>
					<el-icon class="el-input__icon">
						<calendar />
					</el-icon>
				</template>
			</el-input>
		</el-row>
	
		<el-row :gutter="20">
			<el-input v-model="input4" placeholder="Type something">
				<template #prefix>
					<el-icon class="el-input__icon">
						<search />
					</el-icon>
				</template>
			</el-input>
		</el-row>
	</div>
	
	<el-divider content-position="left">文本域</el-divider><!-- =============================================================== -->
	<p class="desc">用于输入多行文本信息可缩放的输入框。可调整大小以输入多行文本信息。添加属性type="textarea"来将输入更改为原生文本区域。</p>
	<p class="desc">文本域高度可通过 rows 属性控制</p>
	<el-input v-model="textarea" :rows="3" type="textarea" placeholder="Please input"></el-input>
	
	<el-divider content-position="left">自适应文本域</el-divider><!-- =============================================================== -->
	<p class="desc">设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。</p>
	<el-input v-model="textarea1" autosize type="textarea" placeholder="无限增加高度"></el-input>
	<div style="margin: 20px 0"></div>
	<el-input v-model="textarea2" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="高度超过4，则出现滚动条"></el-input>
	
	<el-divider content-position="left">复合型输入框</el-divider><!-- =============================================================== -->
	<p class="desc">可以在输入框中前置或后置一个元素，通常是标签或按钮。</p>
	<p class="desc">可通过 slot 来指定在 Input 中分发的前置或者后置的内容。</p>
	<div>
		<el-input v-model="input1" placeholder="Please input">
			<template #prepend>Http://</template>
		</el-input>
	</div>
	<div style="margin-top: 15px">
		<el-input v-model="input2" placeholder="Please input">
			<template #append>.com</template>
		</el-input>
	</div>
	<div style="margin-top: 15px">
		<el-input v-model="input3" placeholder="Please input" class="input-with-select">
			<template #prepend>
				<el-select v-model="select" placeholder="Select" style="width: 110px">
					<el-option label="Restaurant" value="1"></el-option>
					<el-option label="Order No." value="2"></el-option>
					<el-option label="Tel" value="3"></el-option>
				</el-select>
			</template>
			<template #append>
				<el-button @click="toSearch"><el-icon><Search /></el-icon></el-button>
			</template>
		</el-input>
	</div>
	<div style="margin-top: 15px">
		<el-input v-model="input3" placeholder="Please input" class="input-with-select">
			<template #prepend>
				<el-button @click="toSearch"><el-icon><Search /></el-icon></el-button>
			</template>
			<template #append>
				<el-select v-model="select" placeholder="Select" style="width: 110px">
					<el-option label="Restaurant" value="1"></el-option>
					<el-option label="Order No." value="2"></el-option>
					<el-option label="Tel" value="3"></el-option>
				</el-select>
			</template>
		</el-input>
	</div>
	
	<el-divider content-position="left">尺寸</el-divider><!-- =============================================================== -->
	<p class="desc">使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。</p>
	<div class="demo-input-size w200">
		<el-input v-model="input1" placeholder="Please Input - large" size="large"></el-input>
		<el-input v-model="input2" placeholder="Please Input - default"></el-input>
		<el-input v-model="input3" placeholder="Please Input - small" size="small"></el-input>
	</div>
	
	<el-divider content-position="left">自动补全</el-divider><!-- =============================================================== -->
	<p class="desc">您可以根据当前输入的内容获取对应的输入建议。</p>
	<p class="desc">Autodcomplete 组件提供输入建议。 fetch-suggestions 属性为返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete 组件返回建议。</p>
	<el-row class="demo-autocomplete">
		<el-col :span="12">
			<div class="sub-title">列出激活时的建议</div>
			<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" class="inline-input" placeholder="Please Input" @select="handleSelect" clearable/></el-autocomplete>
		</el-col>
		<el-col :span="12">
			<div class="sub-title">列出输入建议</div>
			<el-autocomplete v-model="state2" :fetch-suggestions="querySearch" :trigger-on-focus="false" class="inline-input" placeholder="Please Input" @select="handleSelect" clearable/></el-autocomplete>
		</el-col>
	</el-row>
	
	<el-divider content-position="left">自定义模板</el-divider><!-- =============================================================== -->
	<p class="desc">自定义如何显示输入建议。</p>
	<p class="desc">使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。</p>
	<el-autocomplete v-model="state3" :fetch-suggestions="querySearch" popper-class="my-autocomplete" placeholder="Please input" @select="handleSelect" clearable>
		<template #suffix>
			<el-icon class="el-input__icon" @click="handleIconClick">
				<edit />
			</el-icon>
		</template>
		<template #default="{ item }">
			<div class="value">{{ item.value }}</div>
			<span class="link">{{ item.link }}</span>
		</template>
	</el-autocomplete>
	
	<el-divider content-position="left">远程搜索</el-divider><!-- =============================================================== -->
	<p class="desc">从服务端搜索数据。</p>
	<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect" /></el-autocomplete>
	
	
	<el-divider content-position="left">输入长度限制</el-divider><!-- =============================================================== -->
	<p class="desc">使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到 true 来显示剩余字数。</p>
	<el-input v-model="text" minlength="3" maxlength="10" placeholder="Please input" show-word-limit type="text"></el-input>
	<div class="h20"></div>
	<el-input v-model="textarea" maxlength="300" placeholder="Please input" show-word-limit type="textarea" rows=3></el-input>
	<div class="h100"></div>
	
	
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			input0: '',
			input: '',
			input1: '',
			input2: '',
			input3: '',
			input4: '',
			text: '',
			textarea: '',
			textarea1: '',
			textarea2: '',
			select: '',
			state1: '',
			state2: '',
			state3: '',
			state4: '',
			loadAll: [
				{id: 1, value: 'vue', link: 'https://github.com/vuejs/vue' },
				{id: 2, value: 'element', link: 'https://github.com/ElemeFE/element' },
				{id: 3, value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
				{id: 4, value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
				{id: 5, value: 'vuex', link: 'https://github.com/vuejs/vuex' },
				{id: 6, value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
				{id: 7, value: 'babel', link: 'https://github.com/babel/babel' },
				{id: 8, value: '中文汉字，百度', link: 'https://www.baidu.com' },
			],
			querySearch: (queryString, cb) => {
				let restaurants = [];
				restaurants = this.loadAll
				const results = queryString
					? restaurants.filter((v)=>{return v.value.indexOf(queryString) == 0})
					: restaurants
				//调用回调函数返回建议
				cb(results)
			},
			querySearchAsync: (queryString, cb) => {
				let restaurants = [];
				restaurants = this.loadAll
				const results = queryString
					? restaurants.filter((v)=>{return v.value.indexOf(queryString) == 0})
					: restaurants
				//调用回调函数返回建议
				setTimeout(() => {
					cb(results)
				}, 300)
				// cb(results)
			},
			
			
		}
	},
	methods:{
		toSearch(){
			alert("toSearch");
		},
		handleSelect(item){
			console.log(item)
		},
		createFilter(queryString){
			return (restaurant) => {
				return (
					restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
				)
			}
		},
		handleIconClick(ev){
			console.log(ev);
		},
		clearInput(){
			console.log("在点击由 clearable 属性生成的清空按钮时触发");
		},
		inputChange(val){
			// console.log("inputChange");
			console.log("inputChange : " + val);
		},
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
var vm = app.mount("#app");

</script>
</html>
